<template>
  <div>
    <div class="breadcrumb">
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/indexHome/companyHome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/home/salary/qySalaryList' }">企业人员工资</el-breadcrumb-item>
            <el-breadcrumb-item>{{lastItemName}}</el-breadcrumb-item>
        </el-breadcrumb> -->
      <div class="operate">
        <el-link type="primary" @click="downLoad('salaryOperate')"
          >点击下载操作说明</el-link
        >
        <el-button
          type="primary"
          class="downLoadBtn"
          @click="downLoad('salaryExcel')"
          >工资表导入模板</el-button
        >
      </div>
    </div>

    <el-row>
      <el-col class="topTitle">
        <!-- <el-steps :active="1" simple >
                    <el-step title="制作工资表" icon="el-icon-edit"></el-step>
                    <el-step title="编辑工资表" icon="el-icon-edit"></el-step>
                    <el-step title="支付工资" icon="el-icon-edit"></el-step>
                </el-steps>  -->
        <el-steps :active="activeIndex" finish-status="success" align-center>
          <el-step title="创建工资表"></el-step>
          <el-step title="编辑工资表"></el-step>
          <el-step title="支付工资"></el-step>
        </el-steps>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lastItemName: this.lastItem ? this.lastItem : '制作工资表',
    }
  },
  //搜索条件
  props: ['lastItem', 'activeIndex'],

  methods: {
    downLoad(type) {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/findurl',
        data: {
          name: type,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            window.open(response.data.result.url)
          } else {
            this.$message({
              type: 'error',
              message: response.data.msg,
            })
          }
        })
        .catch((error) => {})
    },
  },
}
</script>
<style scoped lang="less">
.el-steps {
  background: #e4ebf1;
  border-radius: 4px 4px 0 0;
  padding: 10px 0;
  padding-top: 15px;
}

// 面包屑样式
.breadcrumb {
  margin-bottom: 15px;
  position: relative;
  padding: 25px;
}

.operate {
  position: absolute;
  right: 24px;
  top: 16px;
}

.el-breadcrumb {
  display: inline-block;
  height: 32px;
  line-height: 32px;
}

.el-row {
  padding: 0 24px;
}
// 按钮样式
.downLoadBtn {
  width: 136px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #009588;
  border-radius: 21px;
  font-size: 14px;
  color: #009588;
  text-align: center;
  background: #fff;
  padding: 0;
  margin-left: 10px;
}

.downLoadBtn:hover {
  background: rgba(0, 149, 136, 0.1);
}

/* 步骤条 */
.topTitle /deep/ .el-step__head.is-process {
  color: #fff;
  .el-step__icon.is-text {
    border: 2px solid #009588;
    background: #009588;
  }
}
.topTitle /deep/ .el-step__head.is-success,
.topTitle /deep/ .el-step__title.is-success {
  color: #009588;
}

.topTitle /deep/ .el-step__head.is-success .el-step__icon.is-text {
  border-color: #009588;
}

.topTitle /deep/ .el-step__head.is-success .el-step__line {
  background-color: #009588;
  border-color: #009588;
}

.topTitle /deep/ .el-step__title.is-process {
  color: #009588;
}
</style>
